
<template>
  <div class="dia-box">
    <el-dialog v-model="dialogVisible" title="查看考勤" width="940px">
      <div class="content">
        <div class="name">
          <div>班级名称：{{ attendanceInfo.className }}</div>
          <div>第几课次：{{ attendanceInfo.courseTime }}</div>
          <div>上课时间：{{ attendanceInfo.startTime }}</div>
        </div>
        <div class="batch-btn">
          <div><el-button type="primary" @click="allAttendance">全部出勤</el-button></div>
          <div>*出勤隔月不可修改</div>
          <div><el-button type="primary" @click="imgVisible = true">考勤图片</el-button></div>
        </div>
        <div class="student-list">
          <div class="item" v-for="(item, index) in attendanceInfo.studentList" :key="index">
            <div class="item-name">{{ item.student }}</div>
            <div class="status">
              <div :class="item.state == 1 ? 'status_a' : ''" @click="item.state = 1">缺勤</div>
              <div :class="item.state == 0 ? 'status_b' : ''" @click="item.state = 0">出勤</div>
            </div>
            <div class="status_b">
              <div>{{ item.state === 0 ? '正常打卡' : '缺勤'}}</div>
            </div>
          </div>
        </div>
        <div>
          <el-dialog v-model="imgVisible" title="考勤图片" width="800px">
            <div class="img-content">
              <div class="imges">
                <img :src="attendanceInfo.picture" alt="">
              </div>
              <div class="btn">
                <el-button type="primary" @click="imgVisible = false">确定</el-button>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">保存</el-button>
          <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
  import { ref, reactive, defineExpose, getCurrentInstance } from 'vue'
  const { proxy } = getCurrentInstance()
  const attendanceInfo = ref({
    className: "化妆1（周末）",
    courseTime: 52,
    startTime: "09:00-17:00",
    picture: "",
    studentList: [
      {student: "吴媛燕", status: true },
      {student: "任伍珍", status: true},
      {student: "颜辉", status: true}
    ]
  })

  const imgVisible = ref(false)
  const dialogVisible = ref(false)
    // 全部出勤
  const allAttendance = ()=>{
    // attendanceInfo.value.studentList.forEach(item => item.status = true)
  }

  const openMyDialog = (row) => {
    attendanceInfo.value = row
    findDetailStudent()
    dialogVisible.value = true
  }

  // 获取老师考勤详情中学员考勤详情
	const findDetailStudent = () => {
    console.log(attendanceInfo.value);
    const data = {
      attendanceId: attendanceInfo.value.attendanceId,
      classTime: attendanceInfo.value.courseTime
    }
    proxy.$API.student.findDetailStudent.get(data).then(res => {
      console.log(res);
      attendanceInfo.value.studentList = res.data.students
      attendanceInfo.value.picture = res.data.picture
    })
  }


  defineExpose({openMyDialog})
</script>

<style lang="scss" scoped>
.dia-box {
  .content {
    height: 550px;
    overflow-y: auto;
    .name {
      display: flex;
      background: #f0f4f7;
      padding: 10px 10px;
      &>div {
        margin: 0 10px;
        color: #333;
        line-height: 30px;
      }
    }
    .batch-btn {
      margin: 15px 20px;
      display: flex;
      align-items: center;
      &>div:nth-child(2) {
        color: #ff4a3f;
        margin: 0 10px;
      }
    }
    .student-list {
      margin:0 20px;
      .item {
        font-size: 14px;
        display: flex;
        margin-bottom: 10px;
        .item-name {
          width: 108px;
          height: 38px;
          color: #6b6b8a;
          border: 1px solid #999;
          background-color: #f8f8f8;
          text-align: center;
          line-height: 38px;
          margin-right: 15px;
        }
        .status {
          display: flex;
          margin-right: 15px;
          &>div {
            width: 56px;
            color: #b7b7b7;
            background: #ebebeb;
            border: 1px solid #ccc;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 39px;
          }
          .status_a {
            color: #ff4a3f;
            border-color: #ff4a3f;
            background-color: #ffb7b2;
          }
          .status_b {
            color: #27c036;
            border-color: #27c036;
            background-color: #a9e6af;
          }
        }
        .status_b {
          display: flex;
          &>div {
            width: 54px;
            color: #b7b7b7;
            text-align: center;
            height: 39px;
            line-height: 39px;
            color: #a2a2a2;
          }
        }
      }
    }

    .img-content {
      .imges {
        height: 440px;
        overflow-y: auto;
        padding: 20px;
        text-align: center;
        font-size: 14px;
        color: #666666;

        img {
          width: 100%;
          height: auto;
        }
      }
      .btn {
        text-align: center;
        padding: 15px 0;
      }
    }
  }
  ::v-deep .el-dialog__body {
    border-top: 1px #cfcfcf solid;
    padding: 0;
  }
  ::v-deep .el-dialog__footer {
    text-align: center;
    border-top: 1px solid #cfcfcf;
    background: #f0f4f7;
    padding: 15px 0;
  }
}
</style>